<!-- 首页，突出人脉关系图 -->
<template>
  <s-clean-layout navbar="none" tabbar="/pages/index/index">
    <!-- 固定顶部区域 -->
    <view class="fixed-header">
    <!-- 顶部状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <!-- 页面标题栏 -->
      <view class="nav-header" :style="{ height: navbarHeight + 'px' }">
        <text class="title">人脉</text>
      </view>
    </view>
    


    <!-- 可滚动内容区域 -->
    <view class="scrollable-content">
    <!-- 原有内容 -->
      <view class="page-content" :style="{ height: pageContentHeight + 'px' }">
      <!-- 图文组件：图片轮播 -->
      <relation-graph
          ref="relationGraphRef"
          @click="handleNodeClick"
          class="graph-full"
      />
      </view>
    </view>
  </s-clean-layout>
</template>

<script setup>
	import { computed, ref, onMounted, watch } from 'vue';
	import {
		onLoad,
		onPageScroll,
		onShow
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	import RelationGraph from '@/sheep/components/s-relation-graph/index.vue'; // 改为同步导入

	// 获取状态栏和胶囊高度
	const statusBarHeight = ref(0)
	const navbarHeight = ref(56) // 默认导航栏高度
	const pageContentHeight = ref(800) // 页面内容高度
	const relationGraphRef = ref(null)
	
	// 计算微信小程序的安全高度
	// #ifdef MP-WEIXIN
		uni.getSystemInfo({
		success: (res) => {
				statusBarHeight.value = res.statusBarHeight || 0
				
				// 参考联系人页面，使用更合适的导航栏高度
				try {
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
					if (menuButtonInfo) {
						// 导航栏高度 = 胶囊按钮高度 + 适当边距
						const menuButtonHeight = menuButtonInfo.height || 32
						const menuButtonTop = menuButtonInfo.top || statusBarHeight.value
						const menuButtonBottom = menuButtonTop + menuButtonHeight
						// 减少安全距离，使用更紧凑的高度
						navbarHeight.value = Math.max(56, menuButtonBottom - statusBarHeight.value + 4)
					} else {
						// 兜底方案：参考联系人页面使用56px
						navbarHeight.value = 56
					}
				} catch (e) {
					// 获取胶囊信息失败，参考联系人页面使用56px
					navbarHeight.value = 56
				}
				
				// 计算页面内容区域高度：铺满到tabbar边界，占满页面空间
				const totalNavHeight = statusBarHeight.value + navbarHeight.value
				// 关系图直接铺到tabbar边界，控制元素浮动在图表上方
				const availableHeight = res.windowHeight - totalNavHeight
				// 让关系图完全占满可用空间
				pageContentHeight.value = Math.max(500, availableHeight)
				
				// 设置CSS变量供样式使用
				document.documentElement.style.setProperty('--total-nav-height', totalNavHeight + 'px')
				document.documentElement.style.setProperty('--status-bar-height', statusBarHeight.value + 'px')
				

			console.log('微信小程序高度计算:', {
				windowHeight: res.windowHeight,
				statusBarHeight: statusBarHeight.value,
				navbarHeight: navbarHeight.value,
				totalNavHeight,
				pageContentHeight: pageContentHeight.value,
				note: '关系图铺满到tabbar边界，控制元素浮动显示'
			})
		}
	})
	// #endif
	
	// #ifndef MP-WEIXIN
	uni.getSystemInfo({
		success: (res) => {
			statusBarHeight.value = res.statusBarHeight || 0
			// 其他平台使用默认高度
			navbarHeight.value = 56
			
			// H5或其他平台的高度计算：与微信小程序保持一致
			const totalNavHeight = statusBarHeight.value + navbarHeight.value
			// 关系图直接铺到tabbar边界，控制元素浮动在图表上方
			const availableHeight = res.windowHeight - totalNavHeight
			// 让关系图完全占满可用空间
			pageContentHeight.value = Math.max(500, availableHeight)
			
			// 设置CSS变量供样式使用
			document.documentElement.style.setProperty('--total-nav-height', totalNavHeight + 'px')
			document.documentElement.style.setProperty('--status-bar-height', statusBarHeight.value + 'px')
			

			
			console.log('其他平台高度计算:', {
				windowHeight: res.windowHeight,
				statusBarHeight: statusBarHeight.value,
				navbarHeight: navbarHeight.value,
				totalNavHeight,
				pageContentHeight: pageContentHeight.value,
				note: '关系图铺满到tabbar边界，控制元素浮动显示'
			})
		}
	})
	// #endif

	// 隐藏原生tabBar
	// uni.hideTabBar();

	const template = computed(() => sheep.$store('app').template?.home);

	// 获取组件数据的方法
	const getComponentData = (type) => {
	  const component = template.value?.components?.find(item => item.id === type);
	  return component?.property || {};
	};

	// 获取组件样式的方法
	const getComponentStyle = (type) => {
	  const component = template.value?.components?.find(item => item.id === type);
	  return component?.property?.style || {};
	};

	const todoListRef = ref(null)

	onLoad((options) => {
		// #ifdef MP
		// 小程序识别二维码
		if (options.scene) {
			const sceneParams = decodeURIComponent(options.scene).split('=');
			console.log("sceneParams=>",sceneParams);
			options[sceneParams[0]] = sceneParams[1];
		}
		// #endif

		// 预览模板
		if (options.templateId) {
			sheep.$store('app').init(options.templateId);
		}

		// 解析分享信息
		if (options.spm) {
			$share.decryptSpm(options.spm);
		}

		// 进入指定页面(完整页面路径)
		if (options.page) {
			sheep.$router.go(decodeURIComponent(options.page));
		}
	});

	onPageScroll(() => {});

	onShow(() => {
		// 刷新关系图
		if (relationGraphRef.value && typeof relationGraphRef.value.refresh === 'function') {
			relationGraphRef.value.refresh();
		}
	});

	// 页面首次加载时也刷新关系图
	onMounted(() => {
		// 刷新关系图
		if (relationGraphRef.value && typeof relationGraphRef.value.refresh === 'function') {
			relationGraphRef.value.refresh();
		}
	});

	// 监听登录状态变化，登录后刷新关系图
	watch(() => sheep.$store('user').isLogin, (newLoginState, oldLoginState) => {
		console.log('登录状态变化:', oldLoginState, '->', newLoginState);
		if (newLoginState && !oldLoginState) {
			console.log('用户登录，刷新关系图');
			// 延迟一下，确保登录流程完成
			setTimeout(() => {
				if (relationGraphRef.value && typeof relationGraphRef.value.refresh === 'function') {
					relationGraphRef.value.refresh();
				}
			}, 1000);
		}
	});

	// 处理节点点击
	function handleNodeClick(params) {
		if (params.dataType === 'node') {
			uni.showToast({
				title: `点击了：${params.data.name}`,
				icon: 'none'
			});
		}
	}
</script>

<style lang="scss" scoped>
.full-layout {
	height: 100vh;
	min-height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
	background: #fff;
	overflow: hidden;
}

/* 固定顶部区域 */
.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: #fff;
	border-bottom: 1px solid #f0f0f0;
}

.nav-header {
	/* 高度通过行内样式动态设置 */
	flex-shrink: 0;
	width: 100%;
	background: #fff;
	font-size: 20px;
	font-weight: bold;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* 可滚动内容区域 */
.scrollable-content {
	width: 100%;
	overflow: hidden;  /* 首页关系图不需要滚动，保持原有的overflow hidden */
	/* 为固定顶部留出空间 */
	margin-top: calc(var(--status-bar-height, 44px) + 56px);
	/* 设置精确高度，关系图铺满剩余空间 */
	height: calc(100vh - var(--status-bar-height, 44px) - 56px - 50px); /* 减去状态栏、导航栏和tabbar */
}

/* 微信小程序专用样式优化 */
/* #ifdef MP-WEIXIN */
.nav-header {
	/* 确保在微信小程序中不被胶囊遮挡，但保持与联系人页面一致的紧凑感 */
	padding-top: 4px;
	padding-bottom: 4px;
	/* 标题居中，但给右侧胶囊留出空间 */
	padding-right: 120px; /* 为胶囊按钮留出足够空间 */
	justify-content: center;
}

.scrollable-content {
	/* 微信小程序中使用动态计算的间距 */
	margin-top: var(--total-nav-height, 100px);
	/* 设置精确高度，关系图铺满剩余空间 */
	height: calc(100vh - var(--total-nav-height, 100px) - 50px); /* 减去顶部和tabbar */
}
/* #endif */

.main-content {
	flex: 1 1 0;
	width: 100%;
	height: 0;
	overflow: hidden;
	position: relative;
	background: #fff;
	display: flex;
}

.page-content {
  width: 100%;
  /* 高度通过行内样式动态设置 */
  background: transparent;
  flex-shrink: 0;
  overflow: hidden;
}

.graph-full {
  width: 100%;
  height: 100%;
  background: transparent;
}

/* 微信小程序页面样式优化 */
/* #ifdef MP-WEIXIN */
page {
	height: 100vh;
	overflow: hidden;
	box-sizing: border-box;
}

/* 确保首页页面内容区域不会产生滚动条 */
.page-content {
	overflow: hidden !important;
	box-sizing: border-box;
}
/* #endif */

/* 其他平台样式 */
/* #ifndef MP-WEIXIN */
:global(body), :global(html) {
	width: 100vw;
	height: 100vh;
	overflow: hidden !important;
}
/* #endif */
</style>
